<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI角色切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }

        #chat {
            display: none;
            flex-direction: column;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #ccc;
            z-index: 100;
        }

        #chat .close_button {
            position: absolute;
            cursor: pointer;
            width: 60px;
            height: 30px;
            right: 10px;
            top: 10px
        }

        #chat .chat_list {
            height: 90%;
            display: flex;
            padding-top: 60px;
            flex-direction: column;
        }

        .chat_list .item {
            display: inline-block;
            padding: 2px;
            border: 1px solid black;
        }

        .chat_right {
            text-align: right;
        }

        .chat_left {
            text-align: left;
        }

        #chat .chat_bottom {
            padding: 2px 20px;
            display: flex;
        }

        #chat .chat_input {
            font-size: 30px;
            text-indent: 2px;
            width: 90%;
        }

        #chat button {
            width: 10%;
        }



        #chat chat_rigth {}

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .category-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .tab {
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 25px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            backdrop-filter: blur(10px);
        }

        .tab:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .tab.active {
            background: rgba(255, 255, 255, 0.4);
            border-color: white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .roles-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .role-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            cursor: pointer;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .role-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        }

        .role-card h3 {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .role-card p {
            color: #666;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .role-detail {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 30px;
            margin-top: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .role-detail h2 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }

        .role-detail-content {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 15px;
        }

        .detail-item {
            padding: 15px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }

        .detail-item h4 {
            color: #333;
            margin-bottom: 8px;
        }

        .detail-item p {
            color: #666;
            line-height: 1.5;
        }

        .no-selection {
            text-align: center;
            color: white;
            font-size: 1.2em;
            padding: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
        }

        @media (max-width: 768px) {
            .category-tabs {
                flex-direction: column;
                align-items: center;
            }

            .roles-container {
                grid-template-columns: 1fr;
            }

            .tab {
                width: 80%;
                text-align: center;
            }
        }

        .gotoChat {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .gotoChat button {
            width: 100px;
            height: 30px;
            cursor: pointer;
            background-color: red
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>角色切换系统</h1>
            <p>点击不同类别查看角色信息</p>
        </div>

        <div class="category-tabs">
            <div class="tab active" onclick="switchCategory('生活角色')">生活角色</div>
            <div class="tab" onclick="switchCategory('创意角色')">创意角色</div>
            <div class="tab" onclick="switchCategory('实用角色')">实用角色</div>
        </div>

        <div id="roles-container" class="roles-container">
            <!-- 角色列表将通过JavaScript动态生成 -->
        </div>

        <div id="chat">
            <button class="close_button" onclick="closeBox()">×</button>
            <div class="chat_list">
            </div>
            <div class="chat_bottom">
                <input placeholder="请输入内容" class="chat_input" /> <button onclick="chat_btn()">发送</button>
            </div>
        </div class="chat_box">
    </div>
    </div>

    <div id="role-detail" class="role-detail">
        <div id="detail-content">
            <div class="no-selection">
                <p>请选择一个角色查看详细信息</p>
            </div>
        </div>
    </div>
    </div>

    <script>
        // 角色数据
        const rolesData = {
            "生活角色": [
                {
                    name: "心理咨询师",
                    description: "帮助人们解决心理问题，提供情感支持和专业建议",
                    detail: {
                        skills: "情绪管理、沟通技巧、心理评估、危机干预",
                        experience: "5年以上心理咨询经验，擅长处理焦虑、抑郁等心理问题",
                        approach: "采用认知行为疗法和人本主义疗法相结合的方式"
                    }
                },
                {
                    name: "健身教练",
                    description: "指导人们进行科学健身训练，制定个性化健身计划",
                    detail: {
                        skills: "运动生理学、营养学、训练计划制定、激励技巧",
                        experience: "专业健身教练资格认证，服务超过1000名会员",
                        approach: "根据个人体质和目标制定专属训练方案"
                    }
                },
                {
                    name: "营养师",
                    description: "提供科学的营养指导，帮助人们改善饮食习惯",
                    detail: {
                        skills: "营养学知识、膳食规划、健康咨询、体重管理",
                        experience: "注册营养师，专注慢性病营养干预",
                        approach: "个性化营养方案，结合生活方式调整"
                    }
                },
                {
                    name: "家庭教育指导",
                    description: "为家长提供科学的育儿方法和教育理念",
                    detail: {
                        skills: "儿童心理学、教育学、沟通技巧、亲子关系",
                        experience: "10年家庭教育经验，帮助超过500个家庭",
                        approach: "因材施教，注重家庭环境的营造"
                    }
                }
            ],
            "创意角色": [
                {
                    name: "产品设计师",
                    description: "创造美观实用的产品设计，提升用户体验",
                    detail: {
                        skills: "用户体验设计、视觉设计、原型制作、用户研究",
                        experience: "8年产品设计经验，主导多个成功项目",
                        approach: "以用户为中心的设计思维，注重功能与美学的平衡"
                    }
                },
                {
                    name: "营销策划师",
                    description: "制定营销策略，提升品牌知名度和产品销量",
                    detail: {
                        skills: "市场分析、品牌建设、数字营销、活动策划",
                        experience: "6年营销策划经验，成功打造多个知名品牌",
                        approach: "数据驱动的营销策略，精准定位目标用户"
                    }
                },
                {
                    name: "游戏设计师",
                    description: "创造有趣的游戏体验，设计游戏机制和内容",
                    detail: {
                        skills: "游戏机制设计、用户体验、关卡设计、游戏编程",
                        experience: "5年游戏设计经验，参与多款热门游戏开发",
                        approach: "以玩家体验为核心，平衡娱乐性和挑战性"
                    }
                },
                {
                    name: "故事编剧",
                    description: "创作引人入胜的故事内容，构建完整的情节框架",
                    detail: {
                        skills: "情节设计、角色塑造、对话写作、叙事技巧",
                        experience: "7年编剧经验，作品多次获得奖项",
                        approach: "深入挖掘人物内心，创造真实感和情感共鸣"
                    }
                }
            ],
            "实用角色": [
                {
                    name: "翻译专家",
                    description: "提供专业的语言翻译服务，确保准确传达信息",
                    detail: {
                        skills: "双语能力、文化理解、专业术语、翻译技巧",
                        experience: "10年翻译经验，服务超过500个客户",
                        approach: "注重语境和文化差异，确保翻译的准确性"
                    }
                },
                {
                    name: "技术顾问",
                    description: "为企业提供技术解决方案和咨询服务",
                    detail: {
                        skills: "系统架构、技术选型、项目管理、问题解决",
                        experience: "12年技术经验，服务众多知名企业",
                        approach: "结合企业实际需求，提供定制化技术方案"
                    }
                },
                {
                    name: "写作助手",
                    description: "协助完成各类文本创作，提高写作效率",
                    detail: {
                        skills: "文字表达、逻辑思维、内容创作、语言润色",
                        experience: "8年写作经验，擅长各类文体创作",
                        approach: "根据需求提供个性化写作支持"
                    }
                },
                {
                    name: "数据分析师",
                    description: "分析数据趋势，提供决策支持和商业洞察",
                    detail: {
                        skills: "统计分析、数据可视化、商业智能、预测建模",
                        experience: "6年数据分析经验，服务多个行业领域",
                        approach: "从数据中发现规律，为业务决策提供支持"
                    }
                }
            ]
        };

        let isSend = 0
        //是否接受到请求
        let isRequestStatus = 0
        let url = 'http://localhost:11434/api/chat'
        //收集之前的对话信息
        let payload = {
            model: "qwen3-coder",
            messages: [
            ],
            "stream": false
        }


        // 当前选中的类别
        let currentCategory = "生活角色";

        // 切换类别
        function switchCategory(category) {
            currentCategory = category;

            // 更新标签样式
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                if (tab.textContent === category) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });

            // 生成角色列表
            generateRoleList();
        }

        // 生成角色列表
        function generateRoleList() {
            const container = document.getElementById('roles-container');
            const roles = rolesData[currentCategory];

            container.innerHTML = '';

            roles.forEach(role => {
                const card = document.createElement('div');
                card.className = 'role-card';
                card.innerHTML = `
                    <h3>${role.name}</h3>
                    <p>${role.description}</p>
                `;
                card.onclick = () => showRoleDetail(role);
                container.appendChild(card);
            });
        }

        // 显示角色详情
        function showRoleDetail(role) {
            const detailContent = document.getElementById('detail-content');
            const detail = role.detail;

            detailContent.innerHTML = `
                <h2>${role.name}</h2>
                <div class="role-detail-content">
                    <div class="detail-item">
                        <h4>核心技能</h4>
                        <p>${detail.skills}</p>
                    </div>
                    <div class="detail-item">
                        <h4>专业经验</h4>
                        <p>${detail.experience}</p>
                    </div>
                    <div class="detail-item">
                        <h4>工作方法</h4>
                        <p>${detail.approach}</p>
                    </div>
	    <div class="gotoChat" ><button onclick="gotoChatBtn()">开始聊天</button></div>
                </div>
            `;
        }
        //关闭box
        function closeBox() {
            const chat = document.querySelector("#chat")
            chat.style.display = "none"
        }

        function onloadSvg() {
            return `
                    <svg width="30" height="16" viewBox="0 0 30 16" xmlns="http://www.w3.org/2000/svg">
            <!-- 三个圆点 -->
            <circle cx="5"  cy="8" r="2" fill="#333">
            <animate attributeName="cy"
                        values="8;4;8"
                        dur="0.6s"
                        repeatCount="indefinite"
                        begin="0s"/>
            </circle>
            <circle cx="15" cy="8" r="2" fill="#333">
            <animate attributeName="cy"
                        values="8;4;8"
                        dur="0.6s"
                        repeatCount="indefinite"
                        begin="0.2s"/>
            </circle>
            <circle cx="25" cy="8" r="2" fill="#333">
            <animate attributeName="cy"
                        values="8;4;8"
                        dur="0.6s"
                        repeatCount="indefinite"
                        begin="0.4s"/>
            </circle>
            </svg>`

        }
        /**
         * 把 XMLHttpRequest 封装成 Promise
         * @param {String} url           请求地址
         * @param {Object} payload       要发送的 JSON 数据
         * @param {String} method        请求方法，默认 'POST'
         * @returns {Promise<Object>}    解析后的 JSON 对象
         */
        function request(url, payload = {}, method = 'POST') {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            try {
                                const data = JSON.parse(xhr.responseText);
                                resolve(data);          // 成功
                            } catch (e) {
                                reject(e);              // JSON 解析失败
                            }
                        } else {
                            reject(new Error(`Request failed, status: ${xhr.status}`));
                        }
                    }
                };

                xhr.onerror = () => reject(new Error('Network error'));
                xhr.send(JSON.stringify(payload));
            });
        }





        //记载思考过程很重要，因为可以学到不同的知识点并加深记忆。
        async function gotoChatBtn() {
            const chat = document.querySelector("#chat")
            const chat_list = document.querySelector(".chat_list")
            const detailContent = document.getElementById('detail-content');
            const detail = {}
            detail['name'] = detailContent.querySelector('h2').innerText
            const detail_items = detailContent.querySelectorAll('.detail-item')
            detail['skills'] = detail_items[0].querySelector('p').innerText
            detail['experience'] = detail_items[1].querySelector('p').innerText
            detail['approach'] = detail_items[2].querySelector('p').innerText
            console.log('detail', detail)
            chat.style.display = "flex"
            const str = `你好，假如你是一名${detail.name}，你的核心技能是${detail.skills},专业经验是${detail.experience},工作方法是${detail.approach}，不要表示同意或者是任何回应的词，比如“好的”，直接你的开场白，${detail.name}`
            console.log(str)
            const firstChatDiv = document.createElement('div')
            firstChatDiv.className = 'chat_right item'
            firstChatDiv.innerHTML = '你好'

            const secondChatDiv = document.createElement("div")
            secondChatDiv.className = 'chat_left item'
            secondChatDiv.innerHTML = onloadSvg()
            chat_list.innerHTML = ''

            chat_list.appendChild(firstChatDiv)
            chat_list.appendChild(secondChatDiv)
            //发送请求，首先先禁用发送按钮或者是提醒消息发送太快不进行添加，加个控制器
            isSend = 0
            //这个时候发送请求
            let method = 'POST'
            payload.messages[0] = { role: 'system', content: str }
            //进行第一次系统设置
            await request(url, payload, method).then(res => {
            })
            //首先进行问候
            payload.messages.push({ role: 'user', content: '你好' })
            await request(url, payload, method).then(res => {
                console.log(res)
                secondChatDiv.innerHTML = res.message.content
                isSend = 1 //可以发送信息了
            })
            console.log(111) //验证异步性
        }


        async function chat_btn() {
            const chat_input = document.querySelector('.chat_input')
            const chat_list = document.querySelector(".chat_list")
            console.log(chat_input.value)
            if (isSend === 0) {
                alert("消息发送太快了!")
                return
            } else if (chat_input.value.trim() === '') {
                alert("请输入内容!")
                return
            }
            //发送信息
            const rightDiv = document.createElement('div')
            const letfDiv = document.createElement("div")
            rightDiv.className = 'chat_right item'
            rightDiv.innerHTML = chat_input.value.trim()

            letfDiv.className = 'chat_left item'
            letfDiv.innerHTML = onloadSvg()
            chat_list.appendChild(rightDiv)
            chat_list.appendChild(letfDiv)

            //发送请求
            let method = 'POST'
            payload.messages.push({ role: 'user', content: chat_input.value.trim() })
            await request(url, payload, method).then(res => {
                console.log(res)
                letfDiv.innerHTML = res.message.content
            })
            chat_input.value = '' //重置化聊天数据
        }
        // 初始化页面
        function init() {
            generateRoleList();
        }


        // 页面加载完成后初始化
        window.onload = init;
    </script>
</body>

</html>